<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="./rem.js"></script>
    <title>地图</title>
</head>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mui-content {
    height: 100%;
}

/* 新样式 */
.mui-bar {
    background-color: #FEE21A;
}

#map {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gm-style-mtc {
    display: none;
}

.gmnoprint {
    display: none !important;
}

.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
    display: none;
}

.gm-control-active.gm-fullscreen-control {
    display: none;
}

a[class^="https://maps.google.com/maps"] {
    display: none !important;
}

.loadinggif {
    width: .5rem;
    height: .5rem;
}
</style>

<body>
    <div class="mui-content">
        <div id="map">
            <img class="loadinggif" src="./loading.gif">
        </div>
    </div>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdbjmG3M5keeuFLoeaVNRTf_zTS917648&callback=initMap" async defer></script>
<!-- <script src="./VConsole.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript" charset="utf-8">

document.addEventListener('UniAppJSBridgeReady', function() {
    uni.getEnv(function(res) {
        initMap();
        uni.postMessage({
            data: {
                action: 'test',
                latitude: 'latitude',
                longitude: 'longitude'
            }
        });
    });
});





function initMap() {
    // 获取当前地理位置
    if (navigator.geolocation) {
		
		
		
        navigator.geolocation.getCurrentPosition(function(position) {
            var coords = position.coords;
            startInitMap(coords.latitude, coords.longitude)
        }, function(err) {
            console.log('navigator.geolocation error')
            startInitMap(38.901127,-77.021348)
        }, {
            enableHighAccuracy: true, //是否要求高精度的地理位置信息
            timeout: 10000, //对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
            maximumAge: 60 * 1000 //设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
        })
    } else {
        // alert(globalLanguage.ditu.no_tip);
        alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }
}

function startInitMap(latitude, longitude){
    var myLatlng = new google.maps.LatLng(latitude, longitude);

    var myOptions = {
        // 设定放大倍数
        zoom: 18,
        // 将地图中心点设定为指定的坐标点
        center: myLatlng,
        // 指定地图类型
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // 创建地图并在div中显示
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    // // 在地图上创建标记
    // var marker = new google.maps.Marker({
    //     position: myLatlng,
    //     map: map
    // });
    // // 设定标注窗口，并指定该窗口中的注释文字
    // var infowindow = new google.maps.InfoWindow({
    //     content: "当前位置"
    // });
    // // 打开标注窗口
    // infowindow.open(map, marker);

    uni.postMessage({
        data: {
            action: 'loaded',
            latitude: latitude,
            longitude: longitude
        }
    });

    //监听点击地图事件
    google.maps.event.addListener(map, 'click', function(event) {
        var Lat = event.latLng.lng();
        var Lng = event.latLng.lng();
        uni.postMessage({
            data: {
                action: 'postMessage',
                latitude: Lat,
                longitude: Lng
            }
        });
    });
}
</script>

</html>